<template>
  <div :class="classes" :style="styles" @click="back">
    <slot>
      <div :class="innerClasses">
        <i class="ivu-icon ivu-icon-chevron-up"></i>
      </div>
    </slot>
  </div>
</template>
<script>
  import {scrollTop} from '../../utils/assist';
  const prefixCls = 'ivu-back-top';

  export default {
    props: {
      height: {
        type: Number,
        default: 400
      },
      bottom: {
        type: Number,
        default: 30
      },
      right: {
        type: Number,
        default: 30
      },
      duration: {
        type: Number,
        default: 1000
      },
      toDom: {
        type: String,
        default: null
      }
    },
    data () {
      return {
        backTop: false
      };
    },
    created () {
      var toDom=this.toDom;
      if(toDom!=undefined&&toDom!=null){
        var dom=document.getElementById(toDom);
        if(dom)
          dom.addEventListener('scroll', this.handleScroll, false);
      }
        window.addEventListener('scroll', this.handleScroll, false);
        window.addEventListener('resize', this.handleScroll, false);
    },
    beforeDestroy () {
      var toDom=this.toDom;
      if(toDom!=undefined&&toDom!=null){
        var dom=document.getElementById(toDom);
        if(dom)
        dom.removeEventListener('scroll', this.handleScroll, false);
      }
        window.removeEventListener('scroll', this.handleScroll, false);
        window.removeEventListener('resize', this.handleScroll, false);
    },
    computed: {
      classes () {
        return [
          `${prefixCls}`,
          {
            [`${prefixCls}-show`]: this.backTop
          }
        ];
      },
      styles () {
        return {
          bottom: `${this.bottom}px`,
          right: `${this.right}px`
        };
      },
      innerClasses () {
        return `${prefixCls}-inner`;
      }
    },
    methods: {
      handleScroll () {
        var toDom=this.toDom;
        if(toDom!=undefined&&toDom!=null){
          var dom=document.getElementById(toDom);
          this.backTop = dom.offsetHeight>= this.height;
        }else {
          this.backTop = window.pageYOffset >= this.height;
        }
      },
      back () {
        var toDom=this.toDom;
        if(toDom!=undefined&&toDom!=null){
          var dom=document.getElementById(toDom);
          if(dom)
          dom.scrollUp();
        }else {
          scrollTop(window, document.body.scrollTop, 0, this.duration);
        }
        this.$emit('on-click');
      }
    }
  };
</script>
